<template>
	<view class="coupon-page">
		<view class="checkin-card">
			<view class="left">
				<text class="title">每日签到</text>
				<text class="sub">签到领取优惠券</text>
			</view>
			<button class="btn" :disabled="loading" @click="checkin">{{ loading ? '领取中...' : '立即签到' }}</button>
		</view>

		<view class="list">
			<view class="coupon" v-for="c in coupons" :key="c.id">
				<view class="left">
					<text class="amount">¥{{ c.discountAmount }}</text>
					<text class="cond" v-if="c.thresholdAmount > 0">满{{ c.thresholdAmount }}可用</text>
					<text class="cond" v-else>无门槛</text>
				</view>
				<view class="right">
					<view class="name-row">
						<text class="name">{{ c.name }}</text>
						<text class="count">×{{ c.count }}</text>
					</view>
					<text class="desc">{{ c.description || '—' }}</text>
					<text class="time" v-if="c.endTime">有效期至：{{ formatTime(c.endTime) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'

export default {
	data(){ return { coupons: [], loading: false } },
	onShow(){ this.load(); },
	methods:{
		async load(){
			try{
				const r = await api.getUserCoupons();
				if(r.code===0){
					this.coupons = (r.data||[]).map(x=>({
						...x,
						discountAmount: Number(x.discountAmount||0),
						thresholdAmount: Number(x.thresholdAmount||0)
					}));
				}
			}catch{}
		},
		formatTime(t){ try{ return t.replace('T',' ').substring(0,16); }catch{ return t; } },
		async checkin(){
			if(this.loading) return; this.loading = true;
			try{
				const r = await api.couponCheckin();
				if(r.code===0){
					const amount = Number(r.data?.discountAmount || 0);
					uni.showModal({ title:'签到成功', content:`已获得优惠券：${r.data.name}（¥${amount}）`, showCancel:false });
					this.load();
				}else{
					uni.showToast({ icon:'none', title:r.message||'领取失败' });
				}
			}catch{ uni.showToast({ icon:'none', title:'领取失败' }); }
			finally{ this.loading = false; }
		}
	}
}
</script>

<style>
.coupon-page{ padding: 16rpx; background: #F0F7FF; min-height: 100vh; }
.checkin-card{ position:relative; display:flex; flex-direction: column; gap: 8rpx; background: linear-gradient(135deg,#B8A9E8,#D4C5F5); color:#fff; padding: 24rpx 160rpx 24rpx 24rpx; border-radius: 20rpx; box-shadow: 0 8rpx 24rpx rgba(184,169,232,.3); margin-bottom: 16rpx; }
.checkin-card .title{ font-size: 32rpx; font-weight: 700; display:block; }
.checkin-card .sub{ opacity:.9; font-size: 24rpx; }
.checkin-card .btn{ position:absolute; top: 24rpx; right: 24rpx; background:#fff; color:#8B7BC8; border-radius: 999rpx; padding: 10rpx 24rpx; font-size: 26rpx; }
.list{ display:flex; flex-direction: column; gap: 12rpx; }
.coupon{ display:flex; gap: 16rpx; background:#fff; border-radius: 16rpx; padding: 16rpx; box-shadow: 0 4rpx 16rpx rgba(91,155,213,.08); border-left: 6rpx solid #FF6B6B; }
.coupon .left{ width: 200rpx; display:flex; flex-direction: column; align-items:center; justify-content:center; background: linear-gradient(135deg,#FFE5E5,#FFF0F0); color:#FF4D4F; border-radius: 12rpx; }
.amount{ font-size: 40rpx; font-weight: 800; }
.cond{ font-size: 22rpx; margin-top: 6rpx; }
.right{ flex:1; display:flex; flex-direction: column; justify-content:center; }
.name-row{ display:flex; align-items:center; gap: 12rpx; }
.name{ font-size: 28rpx; color:#2C5F8D; font-weight: 600; }
.count{ font-size: 24rpx; color:#5B9BD5; margin-left: 10rpx; }
.desc{ font-size: 24rpx; color:#4A6FA5; margin-top: 6rpx; }
.time{ font-size: 22rpx; color:#8FA8C4; margin-top: 6rpx; }
</style>

